<style type="text/css">
    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
<template>
    <i-form>
        <Form-item label="标题：" prop="title">
            <span>{{formValidate.title}}</span>
        </Form-item>
        <Form-item label="副标题：">
            <span>{{formValidate.subtitle}}</span>
        </Form-item>
        <Form-item label="浏览数：">
            <span>{{formValidate.viewcount}}</span>
        </Form-item>
        <Form-item label="内容：">
            <p v-html="formValidate.Newscontent"></p>
        </Form-item>
        <!--上传图片-->
        <Form-item label="图片：" prop="image">
            <div class="demo-upload-list">
                <img :src="image" @click="handleView(image)">
            </div>
        </Form-item>
        <Modal title="查看图片" v-model="visible">
            <img :src="seeImg"  v-if="visible" style="width: 100%">
        </Modal>
        <Form-item>
            <i-button type="ghost" @click="jumpPage()" style="margin-left: 8px">返回</i-button>
        </Form-item>
    </i-form>

</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                formValidate: {
                    //添加字段
                    title: '',
                    subtitle: '',
                    source: '',
                    viewcount: '',
                    Newscontent: '',
                },
                image: '',
                visible: false,
                seeImg:'',
                apiUtilBase: apiUtil.urls.baseUrl,

            }
        },
        mounted: function () {

            let id = this.$route.query.id;
           this.getDetail(id)
        },

        methods: {
            //跳转
            jumpPage: function (id, url) {
                this.$router.back(-1)

            },
            //预览上传图片
            handleView(url) {
                this.seeImg = url;
                this.visible = true;
            },
            //详情
            getDetail:function(id){
                let that = this;
                that.$Loading.start();

                let para ={
                    id:id,
                };

                let params = that.$qs.stringify(para);
                apiUtil.get(that,apiUtil.urls.MingDetail, para, function (res) {
                    that.$Loading.finish();
                    that.formValidate.faceimgurl = that.apiUtilBase + res.Msg.Faceimgurl;
                    that.formValidate.title =res.Msg.Title;
                    that.formValidate.subtitle =res.Msg.Subtitle;
                    that.formValidate.viewcount =res.Msg.Viewcount;
                    that.formValidate.Newscontent =res.Msg.Newscontent;
                    that.image = that.apiUtilBase + res.Msg.Faceimgurl;
                });
            },


        }
    }
</script>
